<template>
  <v-card>
    <v-layout row wrap>
      <v-flex xs6>
        <v-btn round color="primary" dark @click="addMember">添加员工</v-btn>
      </v-flex>
    </v-layout>
    <v-data-table
            :headers="headers"
            :items="desserts"
            :pagination.sync="pagination"
            :total-items="totalDesserts"
            :loading="loading"
            class="elevation-1"
    >
      <!--变量列表数据-->
      <template slot="items" slot-scope="props">
        <td class="text-xs-center">{{ props.item.id }}</td>
        <td class="text-xs-center">{{ props.item.username }}</td>
        <td class="text-xs-center">{{ props.item.phone }}</td>
        <td class="text-xs-center">{{ props.item.rolename}}</td>
        <td class="justify-center layout px-0">
          <v-btn icon @click="editMember(props.item)">
            <i class="el-icon-edit"/>
          </v-btn>
          <v-btn icon @click="deleteMember(props.item.id)">
            <i class="el-icon-delete"/>
          </v-btn>
        </td>
      </template>
    </v-data-table>
    <!--弹出的对话框-->
    <v-dialog max-width="500" v-model="show" persistent scrollable>
      <member-form @close="closeWindow" :oldMember="oldMember" :isEdit="isEdit"/>
    </v-dialog>
  </v-card>
</template>
<script>

  import MemberForm from './MemberForm'
  export default {
    data () {
      return {
        totalDesserts: 0,//总记录数
        desserts: [],//当前页数据列表
        loading: true,//加载进度条效果
        pagination: {},//分页信息
        headers: [//表头信息
          { text: '员工编号', align: 'center', value: 'id' },
          { text: '员工姓名', align: 'center', value: 'username' },
          { text: '联系方式', align: 'center', sortable: false, value: 'phone' },
          {text: '员工职位', align: 'center', value: 'rolename'},
          {text: '操作', align: 'center', value: 'id', sortable: false}
        ],
        show: false,// 控制对话框的显示
        oldMember: {}, // 即将被编辑的员工数据
        isEdit: false, // 是否是编辑
      }
    },
    watch: {
      pagination: {
        handler () {
          this.getDataFromServer()
                  .then(data => {
                    this.desserts = data.items
                    this.totalDesserts = data.total
                  })
        },
        deep: true
      }
    },
    mounted () {
      this.getDataFromServer()
              .then(data => {
                this.desserts = data.items
                this.totalDesserts = data.total
              })
    },
    methods: {
      getDataFromServer() { // 从服务的加载数的方法。
        // 发起请求
        this.$http.get("/uman/page", {
          params: {
            page: this.pagination.page,// 当前页
            rows: this.pagination.rowsPerPage,// 每页大小
          }
        }).then(resp => { // 这里使用箭头函数
          this.desserts = resp.data.items;
          this.totalDesserts = resp.data.total;
          // 完成赋值后，把加载状态赋值为false
          this.loading = false;
        })
        /*this.loading = true
        return new Promise((resolve, reject) => {
          const { sortBy, descending, page, rowsPerPage } = this.pagination

          let items = this.getDesserts()
          const total = items.length

          if (this.pagination.sortBy) {
            items = items.sort((a, b) => {
              const sortA = a[sortBy]
              const sortB = b[sortBy]

              if (descending) {
                if (sortA < sortB) return 1
                if (sortA > sortB) return -1
                return 0
              } else {
                if (sortA < sortB) return -1
                if (sortA > sortB) return 1
                return 0
              }
            })
          }

          if (rowsPerPage > 0) {
            items = items.slice((page - 1) * rowsPerPage, page * rowsPerPage)
          }

          setTimeout(() => {
            this.loading = false
            resolve({
              items,
              total
            })
          }, 1)
        })*/
      },
      addMember() {
        // 修改标记
        this.isEdit = false;
        // 控制弹窗可见：
        this.show = true;
        // 把oldMember变为null
        this.oldMember = null;
      },
      editMember(oldMember){
        // 修改标记
        this.isEdit = true;
        // 控制弹窗可见：
        this.show = true;
        // 获取要编辑的brand
        this.oldMember = oldMember;
      },
      deleteMember(id){
        this.$http({
          method: 'delete',
          url: '/uman/member/'+id,
        }).then(() => {
          this.$message.success("删除成功！");
          this.getDataFromServer();
        }).catch(() => {
          this.$message.error("删除失败！");
        });
      },
      closeWindow(){
        // 重新加载数据
        this.getDataFromServer();
        // 关闭窗口
        this.show = false;
      }
    },
    components:{
      MemberForm
    }
  }
</script>